<template>
  <v-app>
    <!-- 顶部=侧边栏 -->
    <v-app-bar app color="primary" dark :dense="denseFlag">
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <!-- 搜索框 -->
      <v-text-field
        v-model="searchText"
        flat
        solo-inverted
        hide-details
        prepend-inner-icon="mdi-magnify"
        label="Search"
        class="hidden-sm-and-down"
        :dense="denseFlag"
        @keyup.enter="handleSearch"
      />
      <v-spacer />
      <!-- 中英文切换 -->
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <v-btn text v-bind="attrs" v-on="on" small>
            <v-icon>mdi-translate</v-icon>
            <v-icon small> mdi-chevron-down </v-icon>
          </v-btn>
        </template>
        <v-list dense>
          <v-list-item-group v-model="selectedItem" color="primary">
            <v-list-item>
              <v-list-item-title @click="changeLang('en')"
                >English</v-list-item-title
              >
            </v-list-item>
            <v-list-item>
              <v-list-item-title @click="changeLang('zh')"
                >简体中文</v-list-item-title
              >
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-menu>
       <!-- 缩放 -->
      <v-tooltip v-if="!fullScreen" bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon @click="requestFullscreen" v-bind="attrs" v-on="on">
            <v-icon>mdi-fullscreen</v-icon>
          </v-btn>
        </template>
        <span>Full Screen</span>
      </v-tooltip>
      <v-tooltip v-else bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon @click="exitFullScreen" v-bind="attrs" v-on="on">
            <v-icon>mdi-fullscreen-exit</v-icon>
          </v-btn>
        </template>
        <span>Exit Full Screen</span>
      </v-tooltip>

      <v-btn icon @click="logoutFn">
        <v-icon dark> mdi-account-circle </v-icon>
      </v-btn>


    </v-app-bar>
   <router-view></router-view>
    <Nav v-model="drawer"></Nav>
   
  </v-app>
</template>

<script>
import Nav from "../components/nav.vue";
export default {
  name: "navbar",
  components: {
    Nav,
  },
  data: () => ({
    drawer: true,
    denseFlag: true,
     searchText: '',
     selectedItem: 0,
      fullScreen: false,
      subItemActive:0

  }),
  methods: {
    changeLang(lang) {
      this.$i18n.locale = lang;
      sessionStorage.setItem("i18nLocale", lang);
      if (sessionStorage.getItem("itemActive")) {
        this.items[0].active = false;
        this.items[Number(sessionStorage.getItem("itemActive"))][
          "active"
        ] = true;
        if (sessionStorage.getItem("subItemActive")) {
          this.subItemActive = Number(sessionStorage.getItem("subItemActive"));
        }
      }
    },
    requestFullscreen () {
      this.fullScreen = true
      const docElm = document.documentElement
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
    },
    exitFullScreen () {
      this.fullScreen = false
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
     logoutFn() {
      this.$store.dispatch('logout')
    }
  },
};
</script>

<style>
</style>